<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <form action="" method="get">
        <input type="text" name="username" class="user" placeholder="姓名">
        <span id="a"></span>
        <br>
        <input type="password" name="password">
        <br>
        <button>提交</button>
    </form>

    <script>

        // 表单提交事件     
        //   onsubmit   阻止默认提交  return false

        //   onfocus  焦点事件
        //   onblur   失去焦点事件   -- 验证的时候使用这个事件

        //   onchange  失去焦点且发生改变   --- 原本就有值，输入有改变的时候，事件才会触发

        //   oninput  输入事件  --- 只要输入在变化就会触发这个事件

        var oForm = document.querySelector('form');
        oForm.onsubmit = function () {
            // alert(1)
            return false
        }


        var oUser = document.querySelector('.user');
        oUser.onfocus = function () {
            // this.placeholder = '';
        }


        oUser.addEventListener('blur', function () {
            console.log(this.value);
        })


        oUser.addEventListener('change', function () {
            console.log(this.value);
        })


        oUser.addEventListener('input', function () {
            // console.log(this.value);
            if (this.value >= 0 && this.value <= 9) {
                a.innerHTML = '数字不能开头';
            }
        })

    </script>

</body>

</html>